<template>
	<div class="wrapper">
		<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
			<empty v-if="!list.length"></empty>
			<div class="main_box" v-else>
				<div class="main" v-for="(item,index) in list" :key="index">
					<div class="dia" style="justify-content: space-between;">
						<div class="dia">
							<div class="dis">
								<img src="../../assets/terminal/logo_img.png" alt="" />
							</div>
							<div class="serial">
								终端编号：{{item.terminalSn}}
							</div>
						</div>
						<!-- 	<div class="dis Bound">
							已绑定
						</div>
						<div class="dis Bound Bound_a">
							未绑定
						</div>
						<div class="dis Bound Bound_b">
							已唤醒
						</div>
						<div class="dis Bound Bound_c">
							解绑
						</div> -->
					</div>
					<div class="main_serial" style="margin-top: 4px;">
						代理商编号：{{item.agentNo}}
					</div>
					<div class="main_serial">
						代理商名称：{{item.agentName}}
					</div>
					<div class="main_serial">
						商户名称：<span
							v-if="item.merchantName==''|| item.merchantName==null|| item.merchantName==undefined">暂无</span>
						<span v-else>{{item.merchantName}}</span>
					</div>
					<div class="main_serial" v-if="item.agentNo==$store.state.user.agentNo">
						商户手机号：<span
							v-if="item.merchantPhone==''|| item.merchantPhone==null|| item.merchantPhone==undefined">暂无</span>
						<span v-else>{{item.merchantPhone}}</span>
					</div>
					<div class="main_serial" v-else>
						商户手机号：<span>暂无</span>
					</div>
					<div class="main_serial" v-if="$route.query.bindType==3">
						上次交易时间：<span>{{item.lastTranTime}}</span>
					</div>
					<div class="main_serial" v-if="$route.query.bindType==3">
						是否唤醒：<span v-if="item.activationStatus==0">未唤醒</span><span v-else-if="item.activationStatus==1">已唤醒</span>
					</div>
					<div class="main_serial" v-if="$route.query.bindType==2">
						扣费金额：{{item.deductAmount}}(元)
					</div>
					<div class="main_serial" v-if="$route.query.bindType==2">
						绑定扣费天数：{{item.deductTime}}(天)
					</div>
					<div class="main_serial" v-if="$route.query.bindType==2">
						绑定时间：{{item.bindingTime}}
					</div>
					<div class="main_serial" v-if="$route.query.bindType==2">
						应扣费日期：{{item.deductDate}}
					</div>
				</div>
			</div>
		</van-list>


	</div>
</template>

<script>
	import {
		selectTerListByChannel,
		selectTerAlertList
	} from '@/api/terminal'
	import store from '@/store'
	import {
		showToast
	} from 'vant'

	import {
		useRoute,
		useRouter,
		RouterView
	} from 'vue-router'
	import {
		defineComponent,
		reactive,
		toRefs,
		ref,
		onMounted,
		computed
	} from 'vue';

	import { useStore } from 'vuex';
	export default defineComponent({
		name: 'sateActive',
		setup() {

			const router = useRoute()
			const state = reactive({
				pageStart: 1,
				pageSize: 10,
				loading: false,
				finished: false,
				list: [],
			})
			const store = useStore();
			//获取终端唤醒总数
			const getTerminalNum = () => {
				// state.terList = router.query.bindType
				let parames = {
					searchType: router.query.searchType,
					agentNo: router.query.serviceNo,
					pageStart: state.pageStart,
					pageSize: state.pageSize,
				}
				if (router.query.channelCode != '' && router.query.channelCode != undefined) {
					parames.channelCode = router.query.channelCode
					// parames.agentName = state.agentName
				}
				selectTerListByChannel(
					parames
				).then(res => {
					if (res.data.records.length != 0) {
						if (res.data.records.length < 10) {
							state.finished = true
							state.loading = false
						} else {
							state.pageStart++
							state.finished = false
							state.loading = false
						}
						state.list = state.list.concat(res.data.records)
					} else {
						state.finished = true
						state.loading = false

					}

				})
			}
			//获取终端绑定总数
			const getTerminalBind = () => {
				// state.terList = router.query.bindType
				let parames = {
					searchType: router.query.searchType,
					agentNo: router.query.serviceNo,
					pageStart: state.pageStart,
					pageSize: state.pageSize,
				}
				if (router.query.channelCode != '' && router.query.channelCode != undefined) {
					parames.channelCode = router.query.channelCode
					// parames.agentName = state.agentName
				}
				selectTerListByChannel(
					parames
				).then(res => {
					if (res.data.records.length != 0) {
						if (res.data.records.length < 10) {
							state.finished = true
							state.loading = false
						} else {
							state.pageStart++
							state.finished = false
							state.loading = false
						}
						state.list = state.list.concat(res.data.records)
					} else {
						state.finished = true
						state.loading = false
					}

				})
			}
			//获取终端未唤醒预警
			const getTerminalActivation = () => {
				// state.terList = router.query.bindType
				let parames = {
					searchType: router.query.searchType,
					agentNo: router.query.serviceNo,
					pageStart: state.pageStart,
					pageSize: state.pageSize,
				}

				if (router.query.channelCode != '' && router.query.channelCode != undefined) {
					parames.channelCode = router.query.channelCode
					// parames.agentName = state.agentName
				}
				selectTerAlertList(
					parames
				).then(res => {
					if (res.data.records.length != 0) {
						if (res.data.records.length < 10) {
							state.finished = true
							state.loading = false
						} else {
							state.pageStart++
							state.finished = false
							state.loading = false
						}
						state.list = state.list.concat(res.data.records)
					} else {
						state.finished = true
						state.loading = false
					}

				})
			}
			// //获取终端无交易预警
			// const getTerminalWarning = () => {
			// 	// state.terList = router.query.bindType
			// 	let parames = {
			// 		searchType: router.query.searchType,
			// 		agentNo: router.query.serviceNo,
			// 		pageStart:state.pageStart,
			// 		pageSize:state.pageSize,
			// 	}
			// 	if (router.query.channelCode != '' && router.query.channelCode != undefined) {
			// 		parames.channelCode = router.query.channelCode
			// 		// parames.agentName = state.agentName
			// 	}
			// 	selectTerListByChannel(
			// 		parames
			// 	).then(res => {
			// 		if (res.data.records.length != 0) {
			// 			if (res.data.records.length < 10) {
			// 				state.finished = true
			// 				state.loading = false
			// 			} else {
			// 				state.pageStart++
			// 				state.finished = false
			// 				state.loading = false
			// 			}
			// 			state.list = state.list.concat(res.data.records)
			// 		} else {
			// 			state.finished = true
			// 			state.loading = false
			// 		}

			// 	})
			// }
			//获取数据
			const getList = () => {
				console.log(store.state.user.agentNo)
				if (router.query.bindType == 0) {
					getTerminalNum()
				} else if (router.query.bindType == 1) {
					getTerminalBind()
				} else if (router.query.bindType == 2 || router.query.bindType == 3) {
					getTerminalActivation()
				}
				// 	state.terList = router.query.bindType
				// 	let parames = {
				// 		searchType: store.state.user.agentNo,
				// 		pageStart: state.pageStart,
				// 		pageSize: state.pageSize
				// 	}
				// 	let agentName = {
				// 		agentName: state.agentName
				// 	}
				// 	console.log(state.agentName)
				// 	if (state.agentName != '') {
				// 		Object.assign(parames,agentName)
				// 		// parames.agentName = state.agentName
				// 	}
				// 	selectTerListByChannel(
				// 		parames
				// 	).then(res => {
				// 		if (res.data.records.length != 0) {
				// 			if (res.data.records.length < 10) {
				// 				state.finished = true
				// 				state.loading = false
				// 			} else {
				// 				state.pageStart++
				// 				state.finished = false
				// 				state.loading = false
				// 			}
				// 			state.list = state.list.concat(res.data.records)
				// 		} else {
				// 			state.finished = true
				// 			state.loading = false
				// 		}

				// 	})
			}
			// const getFindPageList = () => {
			//     findSetPosFeeList({
			//         currentPage: state.currentPage,
			//         ...state.childData
			//     }).then(res => {
			//         if (res.object.length < 10) {
			//             state.finished = true
			//             state.loading = false
			//         } else {
			//             state.currentPage++
			//             state.finished = false
			//             state.loading = false
			//         }
			//         state.posList = state.posList.concat(res.object)
			//     })
			// }

			return {
				...toRefs(state),
				getList,
				
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #FFF9F9;
		min-height: 100vh;

		.main_box {
			padding: 1px 18px 0px 18px;
			box-sizing: border-box;

			// margin-top: 10px;
			.main {
				padding: 12px 12px;
				box-sizing: border-box;
				background-color: #fff;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 14px;
				color: #333333;
				margin-top: 12px;

				.serial {
					margin-left: 10px;
				}

				.main_serial {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 14px;
					color: #333333;
					margin-top: 10px;
					margin-left: 38px;
				}

				.Bound {
					width: 38px;
					height: 18px;
					background: #DFFAE7;
					border-radius: 3px 3px 3px 3px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 10px;
					color: #37C161;
				}

				.Bound_a {
					background: #FCEAEA;
					color: #FF2828;
				}

				.Bound_b {
					background: #DDECFD;
					color: #006DE5;
				}

				.Bound_c {
					background: #FFECE2;
					color: #F3722C;
				}

				img {
					width: 28px;
					height: 28px;
				}
			}
		}
	}
</style>